<template>
  <div class="h-full">
    <n-card title="设计师佣金" :bordered="false" class="h-full rounded-8px shadow-sm">
      <n-space class="pb-12px" justify="space-between">
        <n-space>
          <n-input-group>
            <n-input-group-label>产品</n-input-group-label>
            <n-select v-model:value="productValue" filterable :options="productOption" :style="{ width: '120px' }" />
          </n-input-group>

          <n-input-group>
            <n-input-group-label>规格</n-input-group-label>
            <n-select v-model:value="sizeValue" filterable :options="sizeOption" :style="{ width: '120px' }" />
          </n-input-group>

          <n-input-group>
            <n-input-group-label>设计形式</n-input-group-label>
            <n-select v-model:value="styleValue" filterable :options="styleOption" :style="{ width: '120px' }" />
          </n-input-group>

          <n-button type="primary" ghost>查询</n-button>
        </n-space>
        <n-space align="center" :size="18">
          <n-button type="success">
            <icon-uil:export class="mr-4px text-20px" />
            数据导出
          </n-button>
          <n-button type="primary">产品设置</n-button>
        </n-space>
      </n-space>

      <n-data-table :columns="columns" :data="data" :pagination="pagination" class="flex-1-hidden py-12px" />
    </n-card>
  </div>
</template>

<script setup lang="tsx">
import { h, reactive, ref } from 'vue';
import type { PaginationProps } from 'naive-ui';
import { NSpace, NButton, NPopconfirm, NInputNumber } from 'naive-ui';
// import { useLoading } from '@/hooks';

// const { loading, startLoading, endLoading } = useLoading(false);
const createData = () => [
  {
    key: 0,
    num: 0,
    product: '折扣券',
    size: '180X54',
    type: '套版设计',
    basicMoney: 4,
    styleMoney: 1,
    followMoney: 1
  }
];
const data = ref(createData());
const pagination: PaginationProps = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 15, 20, 25, 30],
  onChange: (page: number) => {
    pagination.page = page;
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
  }
});
const columns = ref([
  {
    type: 'selection',
    align: 'center'
  },
  {
    key: 'num',
    title: '序号',
    align: 'center'
  },
  {
    key: 'product',
    title: '产品',
    align: 'center'
  },
  {
    key: 'size',
    title: '规格',
    align: 'center'
  },
  {
    key: 'type',
    title: '设计类型',
    align: 'center'
  },
  {
    key: 'basicMoney',
    title: '基础设计（元）',
    align: 'center',
    render(row, index) {
      return h(NInputNumber, {
        value: row.basicMoney,
        onUpdateValue(v) {
          data.value[index].basicMoney = v;
        }
      });
    }
  },
  {
    key: 'styleMoney',
    title: '版式费用（元）',
    align: 'center',
    render(row, index) {
      return h(NInputNumber, {
        value: row.styleMoney,
        onUpdateValue(v) {
          data.value[index].styleMoney = v;
        }
      });
    }
  },
  {
    key: 'followMoney',
    title: '后道工艺（元）',
    align: 'center',
    render(row, index) {
      return h(NInputNumber, {
        value: row.followMoney,
        onUpdateValue(v) {
          data.value[index].followMoney = v;
        }
      });
    }
  },
  {
    key: 'actions',
    title: '操作',
    align: 'center',
    render: row => {
      return (
        <NSpace justify={'center'}>
          <NPopconfirm onPositiveClick={() => handleDeleteTable(row.id)}>
            {{
              default: () => '确认删除',
              trigger: () => <NButton size={'small'}>删除</NButton>
            }}
          </NPopconfirm>
        </NSpace>
      );
    }
  }
]);

const productValue = ref('全部');
const productOption = [
  {
    label: '全部',
    value: 1
  },
  {
    label: '名片',
    value: 2
  },
  {
    label: 'PVC名片',
    value: 3
  },
  {
    label: '折扣卷',
    value: 4
  }
];

const sizeValue = ref('全部');
const sizeOption = [
  {
    label: '全部',
    value: 1
  },
  {
    label: '折扣券-180X54',
    value: 2
  },
  {
    label: '折扣卷-90X54',
    value: 3
  },
  {
    label: '折扣卷-210X90',
    value: 4
  },
  {
    label: '折扣卷-140X68',
    value: 5
  },
  {
    label: '折扣卷-其他',
    value: 6
  },
  {
    label: '名片-铜版纸',
    value: 7
  },
  {
    label: '名片-特种纸',
    value: 8
  },
  {
    label: '名片-其他',
    value: 9
  }
];

const styleValue = ref('全部');
const styleOption = [
  {
    label: '全部',
    value: 1
  },
  {
    label: '标准设计',
    value: 2
  },
  {
    label: '稿件修改',
    value: 3
  },
  {
    label: '套版设计',
    value: 4
  },
  {
    label: '自来稿',
    value: 5
  },
  {
    label: '套版不看样',
    value: 6
  },
  {
    label: '高端设计',
    value: 7
  },
  {
    label: '模板套版',
    value: 8
  }
];
</script>

<style scoped></style>
